<template>
  <div>
    <div class="commontop">
      <div class="commontop-left">
        <el-form :inline="true" :model="forms" ref="forms">
          <el-form-item prop="keyword">
            <el-input
              v-model="forms.keyword"
              placeholder="申请人、申请内容"
              clearable
              @keyup.enter.native="goSearch()"
              prefix-icon="el-icon-search"
            ></el-input>
          </el-form-item>
          <el-form-item prop="date">
            <el-date-picker
              v-model="forms.date_range"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="status">
            <el-select clearable 
              v-model="forms.status"
              suffix-icon="iconfont icon-fenlei"
              placeholder="是否审核"
              v-show="xsyc === '1' ? true : false"
            >
              <el-option
                v-for="item in examine"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button
          @click="goSearch"
          class="searchbgc"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
      </div>
    </div>

    <el-table
      v-loading="isLoading"
      max-height="700"
      :data="tableData"
      ref="multipleSelection"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="project_name" label="项目"></el-table-column>
      <el-table-column
        prop="part_company_name"
        label="参建单位"
      ></el-table-column>
      <el-table-column
        prop="project_classify_name"
        label="项目分类"
      ></el-table-column>
      <el-table-column prop="content" label="内容">
        <template slot-scope="scope" @click="See(scope.row.id)">
          <div
            class="lattice"
            @click="See(scope.row.id)"
            style="color: blue; backgroundcolor: red; cursor: pointer"
          >
            {{ scope.row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator_name"
        label="提交人"
        width="70"
      ></el-table-column
      ><el-table-column prop="created_at" label="时间"></el-table-column>
      <el-table-column prop="status" label="状态" width="120px">
        <template slot-scope="scope">
          <el-tag
            type="success"
            class="iconfont icon-tongguo"
            v-if="tableData[scope.$index].status == 1"
            >已通过</el-tag
          >
          <el-tag
            class="iconfont icon-jinyong4"
            v-else-if="tableData[scope.$index].status == 2"
            type="danger"
            >已拒绝</el-tag
          >
          <el-tag
            class="iconfont icon-daishenhe1"
            v-else-if="tableData[scope.$index].status == 0"
            type="danger"
            >未审批</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <div v-show="tableData[scope.$index].status == 0">
            <el-button class="green" size="mini" @click="State(1, scope.row.id)"
              >通过</el-button
            >
            <el-button class="red" size="mini" @click="State(2, scope.row.id)"
              >拒绝</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="forms.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="拒绝理由"
      class="refuse"
      :visible.sync="showRefuse"
      width="25%"
      height="500px"
    >
      <el-form :model="statufrom">
        <el-form-item label="你拒绝的理由是:">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入理由"
            v-model="statufrom.refuse_reason"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="showRefuse = false"
          >暂不设置</el-button
        >
        <el-button type="primary" @click="Subimt">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import {
  classifyAudit,
  borrowApprovalAction,
  getBorrowsData,
} from "../../api/Template/index";
export default {
  data() {
    return {
      //button按钮显示或隐藏
      xsyc: "1",

      //申请时长
      displayData: false,
      tableData: [],

      //审核
      examine: [
        { value: -1, label: "待审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "未通过" },
      ],

      statufrom: {
        approval_borrow_id: "",
        status: "",
        refuse_reason: "",
      },

      //拒绝原因
      showRefuse: false,
      forms: {
        keyword: "",
        per_page: 10,
        page: 1,
        date_range: "",
        status: "",
      },

      //选择器
      multipleSelection: [],

      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      total: 0,
      isLoading: false,
    };
  },
  methods: {
    //搜索
    async goSearch() {
      this.froms.page = 1;
      this.froms.per_page = 10;
      this.current_page = 1;
      console.log(this.forms);
      if (this.forms.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await getBorrowsData(this.forms);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
    },
    async loadData(num) {
      let res = await getBorrowsData(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.current_page = res.data.data.current_page;
      this.total = res.data.data.total;
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.forms.page = val;
      this.loadData(this.forms);
    },
    //分页
    handleSizeChange(val) {
      this.forms.per_page = val;
      this.loadData(this.forms);
    },
    /* 审批 */
    async State(status, id) {
      console.log(status, id);
      this.statufrom.approval_borrow_id = id;
      this.statufrom.status = status;
      if (status == 2) {
        this.showRefuse = true;
      } else if (status == 1) {
        let res = await borrowApprovalAction(this.statufrom);
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            showClose: true,
            duration: 3000,
            type: "success",
          });
          this.loadData();
        } else {
          this.$message({
            message: res.data.msg,
            showClose: true,
            duration: 3000,
            type: "error",
          });
        }
      }
    },
    /* 查看 */
    See(id) {
      this.$router.push({
        path: "/app/common/AppCom",
        query: {
          id: id,
          type: 2,
        },
      });
    },
    async Subimt() {
      let res = await borrowApprovalAction(this.statufrom);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "success",
        });
        this.loadData();
        this.showRefuse = false;
      } else {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "error",
        });
      }
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
.commontop-left {
  display: flex;
  .el-input {
    width: 100%;
  }
  .searchbgc {
    height: 38px;
  }
}
/deep/.el-select .el-input--suffix {
  margin: 0 10px;
  width: 130px;
}
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 12px !important;
}
.el-button--mini {
  padding: 7px 5px;
}
.tab {
  /deep/.el-dialog__body {
    padding: 0;
  }

  .time {
    height: 100px;
    width: 100%;
    .el-form-item {
      margin: 3% 17%;
    }
    .notes {
      font-size: 12px;
      color: red;
      text-align: center;
      margin-top: -13px;
    }
  }
  .dialog-footer {
    width: 100%;
    display: flex;

    justify-content: space-around;
    .el-button {
      width: 120px;
    }
  }
}
.el-textarea {
  width: 80%;
}
/deep/.el-tag {
  font-size: 12px;
}
</style>